<template>
  <form @submit.prevent="() => { return false }" style="min-height:1000px;">
    <div class="game-con-info">
      <div class="info-detail-mask" @click="handleClose" @mouseover="onMaskOver" @mouseleave="onMaskLeave"></div>
      <div class="game-info">
        <!-- <a class="close-modal-page"  @click="handleClose"></a> -->
        <!-- <a class="top-back"  @click="handleClose"></a> -->
        <div class="fx-top-bar" :class="isFixed ? 'is-fixed' : ''">
          <el-popover popper-class="gm-info-pop" placement="bottom" trigger="hover">
              <i class="sm-tip" slot-content>关闭</i>
              <a slot="reference" class="close-modal-page" @click="handleClose"></a>
          </el-popover>
          <a class="top-back" @click="handleClose"></a>
        </div>
        <game :id="id" @pagescroll="pageScroll" />
      </div>
    </div>
  </form>
</template>

<script>
import game from '@/components/info/game'
import api from '@/api/api'
export default {
  components: { game },
  data() {
    return {
      isFixed: false,
      defaultAvatar: require('../assets/pro/default_uimg.svg'),
      info: {
        imagesBean: {
          imageList: []
        },
        member: {

        }
      }
    }
  },
  props: ['id'],
  methods: {
    onMaskOver(e){
      $(e.target).parents('.el-drawer__container').css({'background':'rgba(0, 0, 0, 0.25)','backdrop-filter':'saturate(180%) blur(10px)'})
    },
    onMaskLeave(e){
      $(e.target).parents('.el-drawer__container').css({'background':'rgba(0, 0, 0, 0.6)','backdrop-filter':'saturate(180%) blur(16px)'})
    },
    pageScroll(_top) {
      this.isFixed = _top > 250;
    },
    onImgError(e) {
      e.target.src = require('../assets/pro/default_uimg.svg');
    },
    async handleFollow() {
      if (this.info.isSubscribe > 0) {
        let res = await api.cancelFollowTo(this.info.member.id);
        if (res.code == 0) {
          this.info.isSubscribe = 0;
          this.$amessage.success('已取消，有缘再见～')
        }
      }
      else {
        let res = await api.followTo(this.info.member.id);
        if (res.code == 0) {
          this.$bhelper.addCirRecord('FOLLOW');
          this.$store.dispatch('setLeftMenu',[])
          this.info.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！')
        }
      }
    },
    handleTop() {
      $('.game-con-info').animate(
        {
          scrollTop: 0,
        },
        100
      )
    },
    handleClose() {
      this.$emit('close')
    },
    handleTagPrev() {
      this.gmTagSwiper.slidePrev()
    },
    handleTagNext() {
      this.gmTagSwiper.slideNext()
    },
    handledxVdSwiperPrev() {
      this.gmVideoSwiper.slidePrev();
    },
    handledxVdSwiperNext() {
      this.gmVideoSwiper.slideNext();
    }
  },
  destroyed() {
    // document.body.style.overflow='inherit';
  },
  async mounted() {
    // document.body.style.overflow='hidden';
  }
}
</script>

<style scoped lang="less">


/* 定义淡出动画 */
@keyframes fadeIn {
  from { /* 动画开始时 */
    opacity:0;
  }
  to { /* 动画结束时 */
    opacity:1;
  }
}
.game-con-info {
  animation: fadeIn .3s ease-in-out forwards;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 113;
  width: 100%;
  overflow: hidden;
  height: 100%;

  .game-page {
    // border:1px solid red;
    height: calc(-45px + 100vh);
    overflow-y: auto;
    overflow-x:hidden;
  }


  .cate-page-prev {
    background: url('../assets/pro/gmTag_right_label_arrow.svg') no-repeat;
    width: 80px;
    height: 38px;
    transform: rotate(180deg);
    z-index: 1;
    top: 22px;
    left: -15px !important;

    &:after {
      display: none;
    }

    &:hover {
      background: url('../assets/pro/gmTag_right_label_arrow.svg') no-repeat;
      opacity: .9 !important;
    }
  }

  .cate-page-next {
    background: url('../assets/pro/gmTag_right_label_arrow.svg') no-repeat;
    width: 80px;
    height: 38px;
    z-index: 1;
    top: 22px;
    right: -15px;

    &:after {
      display: none;
    }

    &:hover {
      background: url('../assets/pro/gmTag_right_label_arrow.svg') no-repeat;
      opacity: .9 !important;
    }
  }

  .dxvd-page-prev {
    background: url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
    background-size: cover;
    width: 80px;
    height: 80px;
    transform: rotate(180deg);
    z-index: 1;
    left: 30px !important;
    top: 140px;
    border-radius: 8px;

    &:after {
      display: none;
    }

    &:hover {
      background: url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
      // opacity:.6 !important;
      background-size: cover;
    }
  }

  .dxvd-page-next {
    background: url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
    background-size: cover;
    width: 80px;
    height: 80px;
    z-index: 1;
    border-radius: 8px;
    right: 30px;
    top: 140px;

    &:after {
      display: none;
    }

    &:hover {
      background: url('../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
      background-size: cover;
      // opacity:.6 !important;
    }
  }

  .game-info {
    margin: 0 auto;
    margin-top: 45px;
    background: #000;
    position: relative;
    z-index: 102;
    transition:margin 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    // overflow-y: hidden;
    .back-area {
      position: absolute;
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 30px;
      height: 100%;

      span {
        font-size: 18px;
        font-weight: 500;
      }
    }


    .top-back {
      position: absolute;
      left:30px;
      top:17px;
      width: 44px;
      height: 44px;
      background: url('../assets/pro/gminfo_topback.svg') no-repeat;
      background-size: cover;
      z-index: 102;
      transition: .2s all linear;
      margin-right: 16px;

      &:hover {
        background: url('../assets/pro/gminfo_topback_hover.svg') no-repeat;
        background-size: cover;
      }
    }

    .fx-top-bar {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      position: sticky;
      top: 0px;
      z-index: 102;
      right: 19px;

      transition: .3s all linear;
      animation:opacity 1s ease-in;

      // position: fixed;
      // left:0px;
      // right:0px;
      // top:0px;
      // height:45px;
      .close-modal-page {
        width:25px;
        height:44px;
        // margin-top: -33px;
        background: url('../assets/pro/close_modal_page.svg') no-repeat;
        background-size: 20px;
        transition: .1s all linear;
        right: 19px;
        top:0px;
        position: fixed;
        z-index:1;
        background-position: center;
        &:hover {
          transform: rotate(180deg);
        }
      }

      &.is-fixed {
        background: #181818;

        .top-back {
          top: 6px;
        }
      }

      &:hover{
        // backdrop-filter: saturate(180%) blur(0px);
        + .game-info{
            margin-top:65px;
            // margin-top:65px;
            // transform:translateY(20px);
            .game-page{
                height: calc(-65px + 100vh);
            }
        }
    }
    }

    .game-top {
      height: 800px;
      position: relative;

      .pro-marquee-comments {
        position: absolute;
        right: 177px;
        bottom: 106px;
        z-index: 103;

        .pro-top-comments {
          .item {
            margin-bottom: 10px;
            border-radius: 28px;
            display: flex;
            align-items: center;
            padding: 4px 14px 4px 4px;
            justify-content: flex-start;
            position: relative;
            width: max-content;

            &:before {
              content: '';
              position: absolute;
              top: 0px;
              left: 0px;
              right: 0px;
              bottom: 0px;
              background: rgba(47, 49, 61, 0.8);
              border-radius: 28px;
            }

            .u-img-box {
              min-width: 34px;
              height: 34px;
              border-radius: 34px;
              overflow: hidden;
              margin-right: 11px;
              position: relative;
              z-index: 103;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }

            .cmt-html {
              font-size: 14px;
              color: #fff;
              position: relative;
              z-index: 103;

              .mini-time {
                color: #969696;
                font-size: 12px;
                margin-left: 22px;
                font-style: normal;
              }
            }
          }
        }

        .send-mbox {
          display: flex;
          align-items: center;
          margin-top: 17px;

          .u-img {
            min-width: 34px;
            height: 34px;
            border-radius: 34px;
            overflow: hidden;
            margin-right: 12px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .right {
            width: 281px;
            position: relative;
            display: flex;
            align-items: center;

            input {
              background: #1F1B1A;
              width: 100%;
              border: none;
              border: none;
              line-height: 44px;
              padding-left: 16px;
              font-size: 14px;
              color: #fff;
              border-radius: 22px;
            }

            .opbtns {
              position: absolute;
              right: 0px;
              display: flex;
              align-items: center;

              .face-btn {
                width: 20px;
                height: 20px;
                background: url('../assets/pro/top_cmt_face.svg') no-repeat;
                background-size: cover;
                display: flex;
                align-items: center;
                margin-right: 13px;

                &:after {
                  content: '';
                  width: 1px;
                  background: #484848;
                  height: 18px;
                  margin: 0px 13px;
                  position: absolute;
                  left: 20px;
                }

                &:hover {
                  background: url('../assets/pro/top_cmt_face_active.svg') no-repeat;
                  background-size: cover;
                }
              }

              .send-btn {
                width: 24px;
                height: 24px;
                background: url('../assets/pro/top_cmt_sendbtn.svg') no-repeat;
                background-size: cover;
                margin-left: 13px;
                margin-right: 15px;
              }
            }
          }
        }

        .small-sys-tip {
          font-size: 12px;
          color: #969696;
          margin-top: 12px;
        }
      }

      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(204deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #000000 100%);
        height: 100%;
        z-index: 0;
      }

      .top-bg {
        height: 100%;
        width: 100%;
      }

      .basic {
        position: absolute;
        padding: 0px 176px;
        z-index: 10;
        left: 0px;
        right: 0px;
        top: 0px;
        padding-top: 88px;

        .g-title {
          width: 715px;
          font-size: 55px;
          color: #fff;
          line-height: 77px;
          text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.76);
        }

        .company {
          width: 208px;
          font-size: 16px;
          color: #EAEAEA;
          line-height: 22px;
          margin: 16px 0px 18px 0px;
        }

        .plateform {
          width: 80px;
          font-size: 16px;
          color: #EAEAEA;
          line-height: 22px;
        }

        .user {
          display: flex;
          align-items: center;
          margin-top: 54px;
          margin-bottom: 30px;

          .img-box {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            overflow: hidden;
            margin-right: 17px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .uname {}

          .follow {
            width: 50px;
            line-height: 25px;
            border-radius: 4px;
            border: 1px solid #484848;
            text-align: center;
            margin-left: 15px;
          }
        }

        .fav-row {
          display: flex;
          align-items: center;

          .fav-to-folder {
            width: 282px;
            line-height: 50px;
            background: #11CCB1;
            border-radius: 25px;
            display: inline-block;
            text-align: center;
            background-image: url('../assets/pro/gm_infostar_icon.svg');
            background-repeat: no-repeat;
            background-position: 68px center;
            font-size: 16px;
            user-select: none;
            padding-left: 10px;
          }

          .zan {
            background: url('../assets/pro/info_normal_icon.svg') no-repeat;
            width: 50px;
            height: 50px;
            display: inline-block;
            margin-left: 20px;
            position: relative;

            i {
              background: #555866;
              color: #fff;
              line-height: 18px;
              border-radius: 18px;
              position: absolute;
              padding: 0px 4px;
              right: -10px;
              font-style: normal;
              font-size: 12px;
              top: 0px;
            }

            &.active {
              background: url('../assets/pro/info_press_icon.svg') no-repeat;

              i {
                background: #11CCB1;
              }
            }
          }
        }

        .sub-desc {
          font-size: 14px;
          color: #EAEAEA;
          margin: 20px 0px 40px 0px;
        }

        .gm-tag-box {
          max-width:530px;
          position: relative;
        }

        .game-tags {
          li {
            line-height: 38px;
            width: max-content !important;
            margin-right: 15px;
            border-radius: 38px;
            overflow: hidden;

            a {
              background-color: rgba(66, 64, 74, 0.8);
              color: #fff;
              padding: 0px 22px;
              display: inline-block;
              height: 100%;
              user-select: none;
              width: 100%;
              background-image: url('../assets/pro/tag_arrow.svg');
              background-repeat: no-repeat;
              background-position: 85% center;
              background-size: 6px 10px;

              &.active {
                background-color: #42404A;
              }

              &:hover {
                background-color: #42404A;
              }
            }
          }
        }

        .game-desc-tit {
          font-size: 20px;
          color: #EAEAEA;
          margin-bottom: 20px;
        }

        .game-desc {
          width: 734px;
          font-size: 16px;
          font-weight: 400;
          color: #EAEAEA;
          line-height: 34px;
          margin-top: 20px;
        }
      }
    }

    .center-info {
      padding-bottom: 20px;

      .dx-video-datas {
        margin-top: 10px;

        .dx-vd-item {
          width: 576px !important;
          height: 324px;
          min-width: 576px;
          border-radius: 16px;
          overflow: hidden;
          margin-right: 20px;
          position: relative;

          a {
            display: inline-block;
            width: 100%;
            height: 100%;

            video {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .play-icon {
            background: url('../assets/pro/video_play_ico.svg') no-repeat;
            background-position: center center;
            background-size: 46px 46px;
            display: inline-block;
            width: 46px;
            height: 46px;
            position: absolute;
            left: calc((100% - 46px) / 2);
            top: calc((100% - 46px) / 2);
          }
        }
      }

      .mx-1566 {
        max-width: 1566px;
        margin: 0 auto;
      }

      .tabs {
        margin-top: 70px;
        margin-bottom: 42px;
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          color: #969696;
          font-size: 24px;
          margin-right: 40px;
          cursor: pointer;
          user-select: none;

          &.active {
            color: #fff;
            font-weight: 500;
            position: relative;

            &:after {
              content: '';
              height: 1px;
              background: #fff;
              left: calc((100% - 24px) / 2);
              bottom: -5px;
              position: absolute;
              width: 24px;
            }
          }

          &:hover {
            color: #fff;
            font-weight: 500;
            position: relative;

            &:after {
              content: '';
              height: 1px;
              background: #fff;
              left: calc((100% - 24px) / 2);
              bottom: -5px;
              position: absolute;
              width: 24px;
            }
          }
        }
      }

      .search-bx {
        position: sticky;
        top: 20px;
        width: 100%;
        width: 100%;
        margin-bottom: 30px;

        // max-width:892px;
        .cancel-search {
          background: url('../assets/pro/cancel_search.svg');
          width: 20px;
          height: 20px;
          position: absolute;
          top: 14px;
          right: 70px;
        }

        form {
          display: flex;
          align-items: center;
          overflow: hidden;
          height: 47px;
          background-image: url('../assets/pro/header/search_icon.svg');
          background-repeat: no-repeat;
          background-position: 13px center;

          border-radius: 47px;
          background-color: #242327;
          padding-left: 33px;

          input {
            height: 26px;
            background-color: #242327;
            // color:#848393;
            border: none;
            padding-left: 15px;
            color: #fff;
            width: 100%;
            font-size: 14px;
          }
        }
      }

      .panel-tit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;

        // border:1px solid red;
        .text {
          font-size: 26px;
          font-weight: 500;
          line-height: 37px;
        }

        .other-ops {
          font-size: 12px;
          color: #6E6D7A;
          line-height: 26px;
          display: flex;

          .jubao-btn {
            background: url('../assets/pro/workinfo/gray_report_icon.svg') no-repeat;
            background-position: left center;
            background-size: 18px 18px;
            padding-left: 23px;
          }

          .share-btn {
            border: 1px solid #323232;
            border-radius: 6px;
            width: 70px;
            text-align: center;
            margin: 0px 20px;
            background: url('../assets/pro/workinfo/gray_share_icon.svg') no-repeat;
            background-position: 10px center;
            background-size: 18px 18px;
            padding-left: 23px;
          }

          .fav-btn {
            border: 1px solid #323232;
            border-radius: 6px;
            width: 70px;
            text-align: center;
            background: url('../assets/pro/workinfo/gray_star_icon.svg') no-repeat;
            background-position: 10px center;
            background-size: 18px 18px;
            padding-left: 23px;
          }
        }
      }

      .gm-imgs {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 70px;

        .img-item {
          width: 297px;
          height: 180px;
          border-radius: 16px;
          overflow: hidden;
          // margin-right: 20px;
          // margin-bottom: 20px;
          display: flex;
          align-items: center;
          // &:nth-child(5n) {
          //   margin-right: 0px;
          // }

          img {
            // width: 100%;
            // height: 100%;
            // object-fit: cover;
          }
        }
      }

      .zan-row {
        text-align: center;
        margin-top: 119px;

        .zan-btn {
          width: 100px;
          height: 100px;
          border-radius: 100px;
          background-color: #181717;
          display: block;
          margin: 0 auto;
          background-image: url('../assets/pro/gm_info_big_zan.svg');
          background-position: 50% 40%;
          background-repeat: no-repeat;

          i {
            font-style: normal;
            font-size: 14px;
            margin-top: 65px;
            display: inline-block;
          }

          &.active {
            background-image: url('../assets/pro/gm_info_big_zaned.svg');
            background-position: 50% 40%;
            background-repeat: no-repeat;
          }
        }
      }

      .new-zans {
        text-align: center;
        margin: 42px 0px 25px 0px;

        .text {
          position: relative;

          &:before {
            content: '';
            height: 1px;
            width: 118px;
            background: #343434;
            position: absolute;
            left: -122px;
            top: 8px;
          }

          &:after {
            content: '';
            height: 1px;
            width: 118px;
            background: #343434;
            position: absolute;
            right: -122px;
            top: 8px;
          }
        }
      }

      .new-zan-uimgs {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;

        .item {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          overflow: hidden;
          margin-right: 20px;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }

      .xg-games {
        display: flex;
        flex-wrap: wrap;

        .bdl-data-item {
          width: 297px;
          height: 223px;
          border-radius: 16px;
          overflow: hidden;
          margin-right: 20px;
          margin-bottom: 20px;
          position: relative;

          &:nth-child(5n) {
            margin-right: 0px;
          }

          .left-icos {
            position: absolute;
            left: 10px;
            top: 10px;
            display: flex;
            align-items: center;

            img {
              &:first-child {
                margin-right: 10px;
              }
            }
          }

          .right-icos {
            position: absolute;
            right: 10px;
            top: 10px;
            display: flex;
            align-items: center;

            img {
              &:first-child {
                // margin-right:10px;
              }
            }
          }

          >img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .basic-u-info {
            position: absolute;
            bottom: 11px;
            left: 13px;
            display: flex;
            align-items: center;
            right: 12px;
            justify-content: space-between;
            z-index: 1;

            .user {
              display: flex;
              align-items: center;

              img {
                height: 26px;
                width: 26px;
                border-radius: 26px;
                object-fit: cover;
                margin-right: 9px;
              }

              .name {
                color: #fff;
                font-size: 14px;
                font-weight: 500;
              }
            }

            .znum {
              font-size: 12px;
              background: url('../assets/pro/dianzanicon.svg') no-repeat;
              padding-left: 26px;
              color: #fff;
            }

            .snum {
              font-size: 12px;
              background: url('../assets/pro/yuedu_icon.svg') no-repeat;
              padding-left: 26px;
              color: #fff;
            }
          }

          .basic-info {
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 1;

            .title {
              font-size: 16px;
              font-weight: 500;
              margin-bottom: 3px;
            }

            .bot-desc {
              font-size: 12px;
              color: #fff;
              display: flex;

              .uname {
                margin-left: 32px;
              }
            }
          }

          .con-mask {
            height: 129px;
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
          }

          .hid-el {
            // display: none;
            opacity: 0;
          }

          &:hover {
            border: 2px solid #11CCB1;

            // width:293px;height:219px;
            .hid-el {
              // display: inline-block;
              opacity: 1;

              transition: .1s all linear;
            }
          }
        }
      }
    }

    // .comment-area {
    //   background: #171717;
    //   padding-top: 39px;
    //   padding-bottom: 44px;

    //   .comment-box {
    //     max-width: 636px;
    //     margin: 0 auto;

    //     .tit-num {
    //       display: flex;
    //       align-items: center;
    //       font-size: 18px;
    //       line-height: 25px;
    //       font-weight: 500;
    //       margin-bottom: 8px;

    //       i {
    //         font-style: normal;
    //         margin-left: 12px;
    //         font-size: 12px;
    //         color: #EAEAEA;
    //         font-weight: normal;
    //       }
    //     }

    //     .comment-inp {
    //       height: 121px;
    //       border-radius: 16px;
    //       overflow: hidden;

    //       textarea {
    //         background: #242327;
    //         resize: none;
    //         width: 100%;
    //         height: 100%;
    //         color: #fff;
    //         font-size: 14px;
    //         line-height: 20px;
    //         border: none;
    //         padding: 11px 14px;
    //       }
    //     }

    //     .send-box {
    //       display: flex;
    //       align-items: center;
    //       justify-content: space-between;
    //       margin-top: 12px;
    //       margin-bottom: 24px;
    //       font-size: 14px;
    //       line-height: 28px;

    //       .add-face {
    //         background: url('../assets/pro/add_face.svg') no-repeat;
    //         background-position: left center;
    //         padding-left: 26px;
    //       }

    //       .send-btn {
    //         background: #11CCB1;
    //         color: #fff;
    //         text-align: center;
    //         width: 56px;
    //         user-select: none;
    //         border-radius: 4px;
    //       }
    //     }

    //     .comments {
    //       .comment-data-item {
    //         display: flex;
    //         align-items: flex-start;
    //         margin-bottom: 20px;

    //         .uavatar {
    //           width: 34px;
    //           height: 34px;
    //           min-width: 34px;
    //           border-radius: 34px;
    //           overflow: hidden;
    //           margin-right: 31px;

    //           img {
    //             width: 100%;
    //             height: 100%;
    //             object-fit: cover;
    //           }
    //         }

    //         .r-con {
    //           background: #202020;
    //           border-radius: 8px;
    //           padding: 12px 16px;
    //           width: 100%;

    //           .name {
    //             color: #BBBBBB;
    //             font-size: 14px;
    //             line-height: 20px;
    //           }

    //           .con-html {
    //             margin-top: 6px;
    //             margin-bottom: 16px;
    //             font-size: 16px;
    //           }

    //           .bot {
    //             display: flex;
    //             align-items: center;
    //             justify-content: space-between;

    //             .time {
    //               font-size: 12px;
    //               color: #6E6D7A;
    //             }

    //             .funs {
    //               display: flex;
    //               align-items: center;

    //               a {
    //                 &:first-child {
    //                   color: #BBBBBB;
    //                   font-size: 14px;
    //                 }
    //               }

    //               .cmt-zan {
    //                 color: #BBBBBB;
    //                 font-size: 12px;
    //                 background: url('../assets/pro/dianzanicon.svg') no-repeat;
    //                 margin-left: 20px;
    //                 padding-left: 25px;
    //               }
    //             }
    //           }
    //         }
    //       }
    //     }
    //   }
    // }
  }
}
</style>